<template>
    <view class="pageIndex">
        <view class="header" :style="{backgroundImage:'url('+$api.imgURL+'vipcardbg.png)'}">
            <view class="user justify-between align-center">
                <view class="headnickname justify-between align-center">
                    <view class="headimg"></view>
                    <view class="bibala">
                        <view class="nicknamevip align-center">
                            <view class="nick">我是昵称</view>
                            <view class="vipc">
                                <image src="@/static/icon/vip1.png" mode="scaleToFill"></image>
                                <text>金卡会员</text>
                            </view>
                        </view>
                        <view class="des">
                            您将享受金卡会员权益
                        </view>
                    </view>
                </view>
                <view class="selshops align-center">
                    选择门店
                    <image src="@/static/icon/xiala.png" mode="scaleToFill"></image>
                </view>
            </view>
            
            <view class="glodcard" :style="{backgroundImage:'url('+$api.imgURL+'glodcard.png)'}">
                <view class="tag1">当前等级</view>
                <image src="@/static/images/jinka.png" class="tit" mode="heightFix"></image>
                <image src="@/static/images/xunzhang.png" class="xun" mode="widthFix"></image>
                <view class="taskbox">
                    <view class="progress">
                        <view class="over" style="width: 80%;"></view>
                    </view>
                    <view class="des">您已推荐了 <text>4</text> 张 再推 <text>1</text> 张即返 <text>500</text> 元 </view>
                </view>
                <view class="btn">查看权益</view>
            </view>
        </view>
        <view style="height:150rpx;"></view>    
        <view class="bibaba" :style="{backgroundImage:'url('+$api.imgURL+'cyhhr.png)'}">
            <view class="title">创业合伙人</view>
            <view class="en_title">VENTURE PARTNERS</view>
            <view class="seesee align-center justify-center">
                查看权益
                <image src="@/static/icon/seesee.png" mode="widthFix"></image>
            </view>
            <view class="apply align-center justify-center">
  
                <image class="quan" src="@/static/icon/quaner.png" mode="widthFix"></image>
                点击申请
            </view>
        </view>
        <view class="bibaba" :style="{backgroundImage:'url('+$api.imgURL+'zlhhr.png)'}">
            <view class="title">战略合伙人</view>
            <view class="en_title">VENTURE PARTNERS</view>
            <view class="seesee align-center justify-center">
                查看权益
                <image src="@/static/icon/seesee.png" mode="widthFix"></image>
            </view>
        </view>
    </view>
</template>

<script>
</script>

<style lang="scss">
    @import '../common/common.scss';
    .pageIndex{
        .header{
            width: 750rpx;
            height: 425rpx;
            background-repeat: no-repeat;
            background-size: 100%;
            position: relative;
            .user{
                width: 696rpx;
                margin: 0 auto;
                .headnickname{
                    .headimg{
                        width: 78rpx;
                        height: 78rpx;
                        background-color: #ccc;
                        border-radius: 50%;
                    }
                    .bibala{
                        margin-left: 30rpx;
                        .nicknamevip{
                            .nick{
                                color: #FFE5B4;
                                font-size: 24rpx;
                                font-weight: 400;
                                margin-right: 10rpx;
                            }
                            .vipc{
                                width: 126rpx;
                                height: 35rpx;
                                position: relative;
                                text-align: center;
                                line-height: 35rpx;
                                text-indent: 30rpx;
                                image{
                                    width: 100%;
                                    height: 100%;
                                    position: absolute;
                                    z-index: 9;
                                    left: 0;
                                    top: 0;
                                }
                                text{
                                    position: relative;
                                    z-index: 10;
                                    color: #6C2A09;
                                    font-size: 18rpx;
                                }
                            }
                        }
                        .des{
                            color: var(--str-mid-color);
                            font-size: 20rpx;
                        }
                    }
                    
                }
                .selshops{
                    font-weight: 800;
                    font-size: 30rpx;
                    color: #fff;
                    font-family: PingFang SC;
                    image{
                        width: 18rpx;
                        height: 13rpx;
                        margin-left: 16rpx;
                    }
                }
            }
            .glodcard{
                width: 750rpx;
                height: 442rpx;
                background-repeat: no-repeat;
                background-size: 100%;
                margin-top: 22rpx;
                position: relative;
                .tag1{
                    width: 127rpx;
                    height: 39rpx;
                    background: #383838;
                    box-shadow: 0rpx 2rpx 5rpx 0rpx rgba(56,56,56,0.73);
                    border-top-right-radius: 14.5rpx;
                    border-bottom-right-radius: 14.5rpx;
                    position: absolute;
                    top: 54rpx;
                    left: 29rpx;
                    font-size: 22rpx;
                    color: #EADDC2;
                    text-align: center;
                    line-height: 39rpx;
                    letter-spacing: 3rpx;
                }
                .tit{
                    position: absolute;
                    height: 96rpx;
                    left: 86rpx;
                    top: 158rpx;
                }
                .xun{
                    position: absolute;
                    width: 193rpx;
                    height: 247rpx;
                    right: 69rpx;
                    top: 58rpx;
                }
                .taskbox{
                    position: absolute;
                    top: 317rpx;
                    left: 83rpx;
                    .progress{
                        width: 336rpx;
                        height: 10rpx;
                        background: #4F4F4F;
                        border-radius: 5rpx;
                        overflow: hidden;
                        .over{
                            height: 10rpx;
                            background: #C29251;
                            border-radius: 5rpx;
                        }
                        
                    }
                    .des{
                        margin-top: 10rpx;
                        font-size: 19rpx;
                        color: #735437;
                        text{
                            color: #FA9C19;
                        }
                    }
                    
                }
                .btn{
                    width: 154rpx;
                    height: 57rpx;
                    background-image: url('@/static/images/btn1.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    position: absolute;
                    bottom: 66rpx;
                    right: 76rpx;
                    text-align: center;
                    line-height: 57rpx;
                    font-size: 26rpx;
                    color: #473F2A;
                    font-style: italic;
                }
            }
        }
        .bibaba{
            width: 750rpx;
            height: 400rpx;
            background-repeat: no-repeat;
            background-size: 100%;
            margin-top: 10rpx;
            position: relative;
            .title{
                display: inline-block;
                width: 100%;
                text-align: center;
                margin-top: 126rpx;
                font-size: 40rpx;
                color: #FFFFFF;
                font-weight: 800; 
                background: linear-gradient(45deg, #EACC86 0%, #D6AD79 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                letter-spacing: 3rpx;
            }
            .en_title{
                font-size: 26rpx;
                color: #FFFFFF;
                background: linear-gradient(45deg, #EACC86 0%, #D6AD79 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                display: inline-block;
                width: 100%;
                text-align: center;
                margin-top: 20rpx;
            }
            .seesee{
                width: 194rpx;
                height: 51rpx;
                text-align: center;
                line-height: 51rpx;
                background: linear-gradient(90deg, #C5A06B 0%, #E7CF93 100%);
                box-shadow: 0rpx 5rpx 16rpx 4rpx rgba(197,136,47,0.2);
                border-radius: 25rpx;
           
                margin: 0 auto;
                margin-top: 22rpx;
                font-size: 24rpx;
                color: #FFFFFF;
                image{
                    width: 28rpx;
                    margin-left: 5rpx;
                }
            }
            .apply{
                width: 208rpx;
                height: 69rpx;
                background: linear-gradient(18deg, #EACC86 0%, #D6AD79 100%);
                border-radius: 0rpx 0rpx 20rpx 20rpx;
                position: absolute;
                top: 0;
                right: 26rpx;
                color: #fff;
                font-size: 24rpx;
                font-weight: 800;
                letter-spacing: 3rpx;
                .quan{
                    width: 27rpx;
                    height: 27rpx;
                    margin-right: 8rpx;
                }
            }
        }
    }
</style>